<template>
  <!-- autoplaySpeed：自动播放时间，单位：毫秒 -->
  <a-carousel arrows autoplay :dots="false" :autoplaySpeed="display.speed * 1000" class="h-full">
    <div v-for="(item, index) in swippers" :key="index" class="relative">
      <!-- 有文章id就可以点击跳转 -->
      <div
        v-if="item.articleid != null && item.articleid != undefined && item.articleid != ''"
        style="vertical-align: top; cursor: pointer"
        @click="onClick(item.iscategory, item.articleid)"
      >
        <!-- 有图片显示图片，没有图片显示标题 -->
        <div
          v-if="item.fid == 0"
          class="carousel-swipper-title"
          :style="{
            color: display.color,
            backgroundColor: display.bgColor,
            fontWeight: 'bold',
            fontSize: '24px',
            lineHeight: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontFamily: 'Microsoft Yahei',
          }"
          ><p style="font-family: 'Microsoft YaHei'">{{ item.title }}</p></div
        >
        <div class="carousel-img-box" v-else>
          <img style="vertical-align: top" :src="getImageFileUrlPrefix + item.fid" />
        </div>
      </div>
      <!-- 否则不可点击跳转 -->
      <div v-else>
        <!-- 有图片显示图片，没有图片显示标题 -->
        <div
          v-if="item.fid == 0"
          class="carousel-swipper-title"
          :style="{
            color: display.color,
            backgroundColor: display.bgColor,
            fontWeight: 'bold',
            fontSize: '24px',
            lineHeight: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontFamily: 'Microsoft Yahei',
          }"
          ><p style="font-family: 'Microsoft YaHei'">{{ item.title }}</p></div
        >
        <div class="carousel-img-box" v-else>
          <img style="vertical-align: top" :src="getImageFileUrlPrefix + item.fid" />
        </div>
      </div>
    </div>
  </a-carousel>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';

  import { useGlobSetting } from '/@/hooks/setting';
  import { getImageFileApi } from '/@/api/platform/file';

  import { useGo } from '/@/hooks/web/usePage';
  import { useCmsStore } from '/@/store/modules/cms';
  import { useRouter } from 'vue-router';

  import { getArticle, viewArticle } from '/@/api/cms/article';
  import { getCategory } from '/@/api/cms/category';

  export default defineComponent({
    name: 'CmsCategorySeptum',
    props: {
      //swippers作为提供轮播的数据，display作为轮播的展示效果控制（包含切换速度、前景色、背景色等）
      swippers: {},
      display: {},
    },
    components: {
      LeftCircleOutlined,
      RightCircleOutlined,
    },
    setup(props, context) {
      // console.log('横隔页信息配置数据', props.swippers);
      // console.log('横隔页信息显示效果数据', props.display);

      const { apiUrl } = useGlobSetting();
      const go = useGo();
      //使用store必须在setup中，否则会报错
      const cmsStore = useCmsStore();
      const router = useRouter();

      const getImageFileUrlPrefix = ref<string>(apiUrl + getImageFileApi);

      /**
       * 点击横隔跳转文章详情或者指定栏目
       * 若iscategory为false则articleid为文章id，跳转文章详情，根据文章内容类型进行不同处理：
       *    文章类型为超链接时打开新窗口，为其他类型时跳转至文章查看页面
       * 若iscategory为true则articleid为栏目id,跳转指定栏目
       * @param iscategory 是否跳转指定栏目
       * @param articleid 文章ID或者栏目ID
       */
      function onClick(iscategory, articleid) {
        if (!!articleid && articleid > 0x0) {
          if (iscategory) {
            //跳转指定栏目
            // console.log('跳转指定栏目，栏目ID：', articleid);

            //根据栏目id获取栏目，判断栏目内容
            getCategory(articleid)
              .then((res) => {
                // console.log('指定栏目', res);

                //如果栏目没有内容或内容为空，根据栏目ID进行跳转到栏目查看的路由
                //如果栏目内容不为空，判断为url或路由；如果以http或https开头表示为外部地址，
                //    使用新窗口打开；否则在当前窗口中进行路由跳转
                let categoryContent = res.content;
                if (!categoryContent || Object.keys(categoryContent).length == 0) {
                  //使用store存储跳转路由需传递的数据
                  cmsStore.setCmsRouteParam({
                    isArticle: false,
                    id: articleid,
                  });

                  //把首页也当做1个栏目，均使用栏目页面进行展示
                  //后台可以在栏目中设置信息，前端根据设置信息显示
                  //设置信息包含:每个栏目：是否在父栏目中列出文章、在父栏目中是显示文章列表还是显示文章提要、在父栏目中的显示顺序、在父栏目中的显示宽度n/24
                  go('/cms/category/' + articleid);
                } else {
                  let httpPrefixIndex = categoryContent.indexOf('http');
                  if (httpPrefixIndex > -1) {
                    //打开外部链接，链接地址为栏目的content
                    // window.open('https://www.baidu.com/s?wd=' + clickCategory.id);`
                    window.open(categoryContent);
                  } else {
                    //使用content作为路由进行跳转
                    go(categoryContent);
                  }
                }
              })
              .catch((ex) => {
                console.log('catch ', ex);
              });
          } else {
            //跳转文章详情
            // console.log('跳转文章详情，文章ID：', articleid);

            // 根据文章id获取文章详情，获取文章的内容类型
            getArticle({ id: articleid }).then((res) => {
              console.log('viewArticleDetail res', res);
              if (res.ctype === 3 || res.ctype === '3') {
                //文章内容类型为超链接，打开新窗口
                viewArticle({ id: articleid }).then((res) => {
                  window.open(res.content);
                });
              } else {
                //使用store存储跳转路由需传递的数据
                // cmsStore.setCmsRouteParam({
                //   isArticle: true,
                //   id: articleid,
                //   // data: article,
                // });
                // go('/cms/article/' + articleid);

                //打开一个新的浏览器窗口（默认）
                const url = router.resolve({
                  path: '/cms/article/' + articleid,
                });
                window.open(url.href);
              }
            });
          }
        }
      }

      return {
        getImageFileUrlPrefix,
        onClick,
      };
    },
  });
</script>
<style scoped lang="less">
  //覆盖antd中走马灯carousel的样式，设置高度为外层容器的100%
  .ant-carousel :deep(.slick-slider) {
    height: 100% !important;
  }
  .ant-carousel :deep(.slick-list) {
    height: 100% !important;
  }
  .ant-carousel :deep(.slick-track) {
    height: 100% !important;
  }
  .ant-carousel :deep(.slick-slide div) {
    height: 100% !important;
  }

  //设置轮播图图片样式，控制高度自适应
  .carousel-img-box {
    height: 100%;
    width: 100%;
    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }
  .carousel-swipper-title:hover {
    text-decoration: underline;
  }
</style>
